【Race追加で“UIに出ない”時の正規手順テンプレ】

結論：
CATEGORIES（データ）に追加しただけではUIに出ない構造がある。
UIが表示する棚（セット）を「配列/リストで直書き」している箇所に追加する必要がある。
＝ “表示リスト”に入れて初めてUIが拾う。

■ 必須対応（2点セット）

1) データ側（CATEGORIES / ITEMS / ENTRIES）に追加
- 新種族の label / val を追加する
- val は1行文字列（改行しない）
- 種族は「生体アンカー」に集中させ、環境ワードは背景側へ分離

2) UI側の「表示する棚（セット）の配列」に追加（最重要）
- initUI / buildUI / createSection 等を確認
- 表示する棚キーを配列で列挙している箇所を探す
- 既存で表示されている棚と同じ形式で追加する

■ よくある失敗パターン
- CATEGORIESに追加しただけでUIに出ると思い込む
- 表示順制御の配列が別ファイルにあることに気づかない
- データは正しいがUIが一切参照していない

■ デバッグ即断チェック
- データは存在するがUIに出ない → 表示配列未登録
- 表示配列に入れた瞬間にUIに出る → 正常

■ Race追加エントリ雛形

{
  label: "🆕 新種族セット",
  val: "new race beastkin, humanoid girl with a clearly human face (no animal muzzle), biological anatomy priority, not cosplay, true fusion"
}

■ 引き継ぎ用ワンフレーズ
UIに出ない問題はデータ不足ではなく「UIが参照する棚配列に入っていない」ことが原因。
アクセサリー食材棚と同じ構造的な罠。

■ 追記：特化コレクションを表示復旧した時と、R-18を最後尾へ送った時の実務ルール

今回の衣装カテゴリー整理で判明した、
「特化コレクションが表示されない」「R-18が最後尾に行かない」
問題の対処ルールを記録する。

【結論】
データが存在していても、
- 後続の initUI
- core 側の version 順 mount
- ext 側の append
- 後から走る全消し処理
によって、UI上では消えたり順番が崩れたりする。

つまり、
「データがある = 表示される」
ではない。

==================================================
1. 特化コレクションが表示されなかった時の原因と対処
==================================================

【原因】
特化コレクション自体のデータは存在していた。
しかし、後から走る旧 attire 側 initUI 内で

parent.innerHTML = "";

のような全消し処理があり、
先に mount された
- シマエナガ・コレクション
- 攻め・スペシャル
- チャイナ服特化コレクション
- アイドル衣装特化コレクション
が丸ごと消されていた。

【重要ルール】
1. 既存棚を描画更新したい時でも、
   parent.innerHTML = "" のような全消しは安易に使わない

2. 置き換えたいのが自分の棚だけなら、
   自分のコンテナだけ remove する
   例：
   const existing = parent.querySelector(".attire-v1-container");
   if (existing) existing.remove();

3. 特化コレクションが「出ない」時は、
   データ不足より先に
   - 後続 initUI が親を全消ししていないか
   - 自分より後に走る版が上書きしていないか
   を疑う

【今回の勝ち筋】
特化コレクションが消えていた原因は、
表示順ではなく「後続版の全消し処理」だった。
これを
「自分の旧コンテナだけ削除」
へ変えたことで、特化コレクションが復帰した。

==================================================
2. R-18 を最後尾へ送る時の原因と対処
==================================================

【原因】
builder_ui.section.attire.bundle.js 側だけで R-18 を最後尾にしても、
ext_attire_role_engine.js が後から
- 男性専用衣装・拡張パック
- 女性専用衣装・判定強化パック
を append してくるため、
R-18 の後ろに male / female pack が来てしまっていた。

さらに builder_core.v1.js は、
PROMPT_PARTS["attire"] を version 昇順で順番に mount しており、
bundle 側だけの調整では最終順を保証できなかった。

【重要ルール】
1. R-18 の末尾固定は bundle 単独では完結しない
   必ず以下も確認する
   - builder_core.v1.js
   - ext_attire_role_engine.js

2. 最後の勝ち筋は、
   「すべて描画された後に、実DOMを並べ替える normalize 処理」
   にする

3. normalize は以下のタイミングで確実に打つ
   - builder_core.v1.js の attire mount 完了直後
   - ext_attire_role_engine.js の male / female pack append 完了直後
   - 必要なら setTimeout でもう一度

4. 並び順は最終的に実DOMで保証する
   例：
   特化コレクション
   → 通常衣装
   → 男性専用 / 女性専用
   → R-18 / Secret

【今回の勝ち筋】
- builder_core.v1.js 側で normalize 呼び出し
- ext_attire_role_engine.js 側で normalize 呼び出し
を追加し、
後追い append のあとでも最後に並び直すようにしたことで、
R-18 が最後尾に固定できた。

==================================================
3. 今回の再発防止ルール
==================================================

□ データはあるのにUIに出ない → 後続 initUI / 全消し / mount順を疑う
□ 特化コレクションが消える → parent.innerHTML = "" を疑う
□ R-18 が最後尾にならない → ext_attire_role_engine.js の append を疑う
□ bundle だけで順番固定しようとしない
□ 最終順は post-mount の normalize で実DOMに対して保証する
□ 区切り線や見出しは、見た目の色より sibling の位置を優先して確認する

【今回の最終教訓】
表示順の問題は、データの順番ではなく
「誰が最後に append したか」
「誰が親を消したか」
「最後に実DOMを整列し直したか」
で決まる。

■ 追記：特化コレクション追加時に「表示されない」のではなく「親棚の中に入っていた」件

今回、行事・季節衣装カテゴリに
- 👹 節分・鬼衣装特化コレクション
- 🎅 サンタ衣装特化コレクション
を並列で表示したい構成を作ったが、
UI上では最初
「👹 節分・鬼衣装特化コレクション」しか見えず、
「🎅 サンタ衣装特化コレクション」が表示されていないように見えた。

【真の原因】
サンタ特化コレクションが消えていたのではなく、
描画時に ATTIRE_DATA 全体を 1つの root node として
createNode(ATTIRE_DATA)
で描いていたため、
サンタ特化コレクションが
「鬼特化コレクションの children の一部」
として1段深く入っていた。

つまり構造は実際にはこうなっていた：

行事・季節衣装
└ 👹 節分・鬼衣装特化コレクション
   ├ 鬼衣装セット
   ├ 鬼衣装ベース
   ├ 鬼カスタマイズ
   ├ 鬼設定
   └ 🎅 サンタ衣装特化コレクション

このため、
サンタ特化は未表示ではなく
「鬼特化の中に入っていた」だけだった。

==================================================
4. 特化コレクションを“同格トップ棚”で出したい時のルール
==================================================

【重要ルール】
1. 特化コレクションを複数並列で見せたい時は、
   ATTIRE_DATA 全体を1つの details として描かない

   NG例：
   root.appendChild(createNode(ATTIRE_DATA));

2. 並列トップ棚にしたい場合は、
   ATTIRE_DATA.children を個別に root へ append する

   例：
   (ATTIRE_DATA.children || []).forEach(child => {
     root.appendChild(createNode(child));
   });

3. 「データはあるのにUIに出ない」時は、
   完全未表示だけでなく
   - 親棚の中に1段深く入っていないか
   - 想定より深い階層に潜っていないか
   を必ず確認する

4. 特化コレクション系では特に、
   - root を1個描くのか
   - children を並列描画するのか
   でUIの見え方が大きく変わる

【今回の勝ち筋】
- ATTIRE_DATA 全体を createNode(ATTIRE_DATA) で描くのをやめた
- 代わりに ATTIRE_DATA.children を個別 append した
- その結果、
  - 👹 節分・鬼衣装特化コレクション
  - 🎅 サンタ衣装特化コレクション
  が同格トップ棚として並列表示された

==================================================
5. 再発防止チェック追加
==================================================

□ 「出ていない」のではなく、親棚の中に入っていないか？
□ createNode(ATTIRE_DATA) で root ごと描いていないか？
□ 並列トップ棚にしたいのに children を個別 append していないか？
□ 特化コレクション追加時、UI階層が1段深くなっていないか？

【今回の教訓】
表示されない問題は、
データ不足や全消し処理だけでなく、
「描画階層が深すぎる」ことでも起きる。

特化コレクションを複数並べたい時は、
1つの root object を描くのではなく、
children をトップレベルとして個別に描画すること。
